{extend name="public/base"}

{block name="title"}
维修订单需求信息
{/block}

{block name="style"}
{css href="/static/wechat/css/index.css" /}
{css href="/static/wechat/popo/css/index_info_map.css" /}
<style type="text/css">
    .index_need #map{height:36%;z-index:999;}
    .weui-popup__overlay{opacity:1;}
    .weui-dialog__btn{color:#0bb20c;font-size:0.8rem;}
    .weui-dialog, .weui-toast{box-shadow:0 0 3px 0 #000;}
</style>
{/block}

{block name="body"}

<div class="pageControl index_need">
    <div class="nav">
        <div class="msui_navTop">
            <a class="msui_navTop-back" href="javascript:history.back();"><i class="micon-back_fff"></i></a>
            <h1 class="msui_navTop-title">需求详情</h1>
        </div>
    </div>
    <div id="map" class="weui-cell__bd"></div>
    <div id='map_bt' class="btmtip" style="display:block;position:absolute;top:38%;right:5px;z-index:999;font-size:12px;border-radius:5px;background-color:#0D9BF2;padding:5px 8px;width:auto;color:white;">导航</div>
    <div class="index_need_detail">
        <div class="msui_table msui_tableCom">
            <a class="msui_tabCell-img msui_tableImg-circle" href="javascript:;">
                <img class="img-response" src="{$order.headimgurl|get_img_url}"  />
            </a>
            <div class="msui_tabCell-content">
                <p class="fs085 cl-3333">{$order.apply_person|default=$order.phone}</p>
                <p class="fs07 cl-6666">{$order.car_name|default=''}</p>
            </div>
            <!--<div class="msui_tabCell-button">-->
                <!--<a href="javascript:;" class="need_link need_message"><img class="img-response" src="/static/wechat/images/message1.jpg" alt=""/></a>-->
            <!--</div>-->
            <div class="msui_tabCell-button">
                <a href="tel:{$order.phone|default=''}" class="need_link need_phone"><img class="img-response" src="/static/wechat/images/message2.jpg" alt=""/></a>
            </div>
        </div>
        <div class="msui_table msui_tableCom">
            <div class="msui_tabCell-content">
                <p class="fs085 cl-3333">[{$order.item_name}]{$order.msg}</p>
            </div>
        </div>
        <div class="msui_table index_need_tableCom">
            <div class="msui_tabCell-content">
                <p class="fs07 cl-9999">{$order.address}</p>
            </div>
            <div class="msui_tabCell-button">
                <p class="fs07 cl-9999">距你约 <span id="box_juli">0</span>m</p>
            </div>
        </div>
        <div class="msui_table index_need_tableCom">
            <div class="msui_tabCell-content need_serve">
                <p class="fs07 cl-9999">服务方式 : <span>{if condition="$order.service_mode==1"}到店服务{else/}上门服务{/if}</span></p>
                <p class="fs07 cl-9999">服务时间 : <span id="box_service_time"></span>（发布时间: <span id="box_add_time"></span>）</p>
            </div>
        </div>

        {if condition="$order.status==1"}
        <p class="fs075 cl-3333 text-center">
            <span class="fs12 cl-ffa" id="need_price">{$order.status|get_order_server_status}</span>
        </p>
        {else/}
        <p class="fs075 cl-3333 text-center" id="need_price">{$order.status|get_order_server_status}</p>
        <p class="fs075 cl-3333 text-center">
            <span class="fs12 cl-ffa">{$order.order_price}</span>元
        </p>
        {/if}
        <a href="javascript:;" class="fs07 cl-9999 text-center need_jump">查看明细图片</a>
        <div id="box_need_jump"></div>
    </div>
    {if condition="$order.status==1"}
        <div class="index_need_btn" id="index_need_btn"><a href="javascript:;">接单</a></div>
    {else/}
        {if condition="$order.status==11" }
            {if condition="$order.repair_id==$repair.id" }
                <div class="index_need_btn"><a href="{:url('order_push')}?id={$order.id}">推送订单</a></div>
            {else/}
                <div class="index_need_btn" style="background:#999;"><a href="javascript:;">您下手太慢了</a></div>
            {/if}
        {/if}
    {/if}
</div>

<!-- loading toast -->
<div id="loadingToast" style="display:none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast" style="opacity: 1; visibility: visible;">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">加载中...</p>
    </div>
</div>
<div id="iosDialog2" class="js_dialog" style="display:none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
        <div class="weui-dialog__ft">
            <a href="javascript:;" onclick="$('#iosDialog2').hide();" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
        </div>
    </div>
</div>

{/block}


{block name="javascript"}
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
wx.config({
    //debug: true,
    appId: '{$signPackage.appId}',
    timestamp: parseInt('{$signPackage.timestamp}'),
    nonceStr: '{$signPackage.nonceStr}',
    signature: '{$signPackage.signature}',
    jsApiList: [
        // 所有要调用的 API 都要加到这个列表中
        'previewImage'
    ]
});



var EARTH_RADIUS = 6378137.0;    //单位M
var PI = Math.PI;
function getRad(d){
    return d*PI/180.0;
}
function getFlatternDistance(lat1,lng1,lat2,lng2){
    var f = getRad((lat1 + lat2)/2);
    var g = getRad((lat1 - lat2)/2);
    var l = getRad((lng1 - lng2)/2);

    var sg = Math.sin(g);
    var sl = Math.sin(l);
    var sf = Math.sin(f);

    var s,c,w,r,d,h1,h2;
    var a = EARTH_RADIUS;
    var fl = 1/298.257;

    sg = sg*sg;
    sl = sl*sl;
    sf = sf*sf;

    s = sg*(1-sl) + (1-sf)*sl;
    c = (1-sg)*(1-sl) + sf*sl;

    w = Math.atan(Math.sqrt(s/c));
    r = Math.sqrt(s*c)/w;
    d = 2*w*a;
    h1 = (3*r -1)/2/c;
    h2 = (3*r +1)/2/s;

    var tmpReturn = d*(1 + fl*(h1*sf*(1-sg) - h2*(1-sf)*sg));
    return (tmpReturn?tmpReturn:0);
}


// 和PHP一样的时间戳格式化函数
// @param  {string} format    格式
// @param  {int}    timestamp 要格式化的时间 默认为当前时间
// @return {string}           格式化的时间字符串
function php_date ( format, timestamp ) {
    var a, jsdate=((timestamp) ? new Date(timestamp*1000) : new Date());
    var pad = function(n, c){
        if( (n = n + "").length < c ) {
            return new Array(++c - n.length).join("0") + n;
        } else {
            return n;
        }
    };
    var txt_weekdays = ["Sunday","Monday","Tuesday","Wednesday", "Thursday","Friday","Saturday"];
    var txt_ordin = {1:"st",2:"nd",3:"rd",21:"st",22:"nd",23:"rd",31:"st"};
    var txt_months = ["", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var f = {
        // Day
        d: function(){
            return pad(f.j(), 2);
        },
        D: function(){
            t = f.l(); return t.substr(0,3);
        },
        j: function(){
            return jsdate.getDate();
        },
        l: function(){
            return txt_weekdays[f.w()];
        },
        N: function(){
            return f.w() + 1;
        },
        S: function(){
            return txt_ordin[f.j()] ? txt_ordin[f.j()] : 'th';
        },
        w: function(){
            return jsdate.getDay();
        },
        z: function(){
            return (jsdate - new Date(jsdate.getFullYear() + "/1/1")) / 864e5 >> 0;
        },
        // Week
        W: function(){
            var a = f.z(), b = 364 + f.L() - a;
            var nd2, nd = (new Date(jsdate.getFullYear() + "/1/1").getDay() || 7) - 1;
            if(b <= 2 && ((jsdate.getDay() || 7) - 1) <= 2 - b){
                return 1;
            } else{
                if(a <= 2 && nd >= 4 && a >= (6 - nd)){
                    nd2 = new Date(jsdate.getFullYear() - 1 + "/12/31");
                    return date("W", Math.round(nd2.getTime()/1000));
                } else{
                    return (1 + (nd <= 3 ? ((a + nd) / 7) : (a - (7 - nd)) / 7) >> 0);
                }
            }
        },
        // Month
        F: function(){
            return txt_months[f.n()];
        },
        m: function(){
            return pad(f.n(), 2);
        },
        M: function(){
            t = f.F(); return t.substr(0,3);
        },
        n: function(){
            return jsdate.getMonth() + 1;
        },
        t: function(){
            var n;
            if( (n = jsdate.getMonth() + 1) == 2 ){
                return 28 + f.L();
            } else{
                if( n & 1 && n < 8 || !(n & 1) && n > 7 ){
                    return 31;
                } else{
                    return 30;
                }
            }
        },
        // Year
        L: function(){
            var y = f.Y();
            return (!(y & 3) && (y % 1e2 || !(y % 4e2))) ? 1 : 0;
        },
        //o not supported yet
        Y: function(){
            return jsdate.getFullYear();
        },
        y: function(){
            return (jsdate.getFullYear() + "").slice(2);
        },
        // Time
        a: function(){
            return jsdate.getHours() > 11 ? "pm" : "am";
        },
        A: function(){
            return f.a().toUpperCase();
        },
        B: function(){
            // peter paul koch:
            var off = (jsdate.getTimezoneOffset() + 60)*60;
            var theSeconds = (jsdate.getHours() * 3600) +
                    (jsdate.getMinutes() * 60) +
                    jsdate.getSeconds() + off;
            var beat = Math.floor(theSeconds/86.4);
            if (beat > 1000) beat -= 1000;
            if (beat < 0) beat += 1000;
            if ((String(beat)).length == 1) beat = "00"+beat;
            if ((String(beat)).length == 2) beat = "0"+beat;
            return beat;
        },
        g: function(){
            return jsdate.getHours() % 12 || 12;
        },
        G: function(){
            return jsdate.getHours();
        },
        h: function(){
            return pad(f.g(), 2);
        },
        H: function(){
            return pad(jsdate.getHours(), 2);
        },
        i: function(){
            return pad(jsdate.getMinutes(), 2);
        },
        s: function(){
            return pad(jsdate.getSeconds(), 2);
        },
        //u not supported yet
        // Timezone
        //e not supported yet
        //I not supported yet
        O: function(){
            var t = pad(Math.abs(jsdate.getTimezoneOffset()/60*100), 4);
            if (jsdate.getTimezoneOffset() > 0) t = "-" + t; else t = "+" + t;
            return t;
        },
        P: function(){
            var O = f.O();
            return (O.substr(0, 3) + ":" + O.substr(3, 2));
        },
        //T not supported yet
        //Z not supported yet
        // Full Date/Time
        c: function(){
            return f.Y() + "-" + f.m() + "-" + f.d() + "T" + f.h() + ":" + f.i() + ":" + f.s() + f.P();
        },
        //r not supported yet
        U: function(){
            return Math.round(jsdate.getTime()/1000);
        }
    };
    return format.replace(/[\\]?([a-zA-Z])/g, function(t, s){
        if( t!=s ){
            // escaped
            ret = s;
        } else if( f[s] ){
            // a date function exists
            ret = f[s]();
        } else{
            // nothing special
            ret = s;
        }
        return ret;
    });
}
</script>
<script src="http://webapi.amap.com/maps?v=1.3&key=9a8d0d7e358d9d80f7f61a1989ba35a0&plugin=AMap.Driving"></script>
<script>
//改写原生的对话框
function sAlert(s){
    $('#iosDialog2').show();
    $('#iosDialog2 .weui-dialog__bd').html(s);
}
window.alert = function(s){sAlert(s);}

var my_lat = parseFloat('{$repair.lat}');
var my_lng = parseFloat('{$repair.lon}');
var order_lat = parseFloat('{$order.lat}');
var order_lng = parseFloat('{$order.lon}');
var need_jump_arr = '{$order.img1}|{$order.img2}|{$order.img3}|{$order.img4}|{$order.img5}'.split('|');

$('.need_jump').click(function(){
    var tmpNum = 0;
    var tmpArr = new Array();
    for(i=0;i<need_jump_arr.length;i++){
        if(need_jump_arr[i]!=''){
            tmpArr[tmpNum] = 'http://'+SCOPE.image_host_url+need_jump_arr[i];
            tmpNum++;
        }
    }
    if(tmpArr.length){
        try{
            wx.previewImage({current:tmpArr[0],urls:tmpArr});
        }catch(e){alert('需要在微信中查看');}
    }else{
        alert('用户没有上传图片');
    }
});

$('#index_need_btn').click(function(){
    $('#loadingToast').fadeIn(100);
    $.ajax({
        type: 'POST',
        url: '{:url("order_get")}',
        data: {
            order_id: '{$order.id}',
            repair_id: '{$repair.id}'
        },
        dataType: 'json',
        error: function (d) {
            $('#loadingToast').fadeOut(100);
            alert('网络异常');
        },
        success: function (d) {
            $('#loadingToast').fadeOut(100);
            var tmpUrl = '{:url("order_push")}?id={$order.id}';
            if(d.code==200){
                //window.location.href = tmpUrl;
                window.location.reload();
            }else{
                if( d.data==parseInt('{$repair.id}') ){
                    //$('.index_need_btn a').html('推送订单');
                    //$('.index_need_btn a').attr('href',tmpUrl);
                    //$('.index_need_btn').click(function(){return true;});
                    //window.location.href = tmpUrl;
                    window.location.reload();
                }else{
                    $('.index_need_btn').hide();
                    if(d.code==400048) {
                        $('.index_need_btn').css('background','#999');
                        $('#need_price').html("抢单次数已经上限，每个订单最多可以抢两次");
                    }else{
                        $('#need_price').html(d.msg);
                        //orther
                    }
                }
            }
        }
    });

});


window.map = new AMap.Map('map', {
    resizeEnable: true,
    center: [my_lng,my_lat],//地图中心点
    zoom: 11 //地图显示的缩放级别
});
//构造路线导航类
var driving = new AMap.Driving({
    policy:AMap.DrivingPolicy.LEAST_TIME,
    map: map
    //,panel: "panel"
});
// 根据起终点经纬度规划驾车导航路线
driving.search([my_lng,my_lat],[order_lng,order_lat],function(status,result){
    $('#map_bt').click(function(){
        driving.searchOnAMAP({
            origin:result.origin,
            destination:result.destination
        });
    });
});


var num_juli = getFlatternDistance(my_lat,my_lng,order_lat,order_lng).toFixed(0);
$("#box_juli").html(num_juli);

var str_service_time = parseInt('{$order.service_time}');
if(str_service_time){
    str_service_time = php_date("m-d H:i",str_service_time);
}else{
    str_service_time = "立即";
}
$("#box_service_time").html(str_service_time);

var str_add_time = php_date("m-d H:i",parseInt('{$order.add_time}'))
$("#box_add_time").html(str_add_time);



</script>
{/block}